<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<%@ include file="/WEB-INF/views/layout/public_css.jsp"%>
<%@ include file="/WEB-INF/views/layout/public_js.jsp"%>
<style type="text/css">
.display-none {
	display:none;
}
</style>

</head>
<body>
<%@ include file="/WEB-INF/views/layout/head.jsp"%>

<div class="container-fluid">
    <div class="row">
    	<div class="col-md-3"></div>
    	<div class="col-md-6">
    		<form class="form-horizontal" id="register" action="<%=basePath%>/supplier/addSupplier" method="post">
    		  <!-- 第一步 -->
    		  <div  id="first-step">
    		   	  <div class="form-group">
				    <a href="<%=basePath%>/civil/register1">new register</a>
				  </div>
	    		  <div class="form-group">
				    <label for="" class="col-sm-2 control-label">用户名</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="username" name="user.username" placeholder="">
				    </div>
				  </div>
	              <div class="form-group">
				    <label for="" class="col-sm-2 control-label">密码</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" placeholder="">
				    </div>
				  </div>
	              <div class="form-group">
				    <label for="" class="col-sm-2 control-label">确认密码</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" id="password" name="user.password" placeholder="">
				    </div>
				  </div>
	              <div class="form-group">
				    <label for="" class="col-sm-2 control-label">真实姓名</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="truename" name="user.truename" placeholder="">
				    </div>
				  </div>
	              <div class="form-group">
				    <label for="" class="col-sm-2 control-label">性别</label>
				    <div class="col-sm-10">
				      <label class="radio-inline">
						  <input type="radio" name="user.gender" id="inlineRadio1" value="男" checked="checked">男
						</label>
						<label class="radio-inline">
						  <input type="radio" name="user.gender" id="inlineRadio2" value="女"> 女
						</label>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-2 control-label">类别</label>
				    <div class="col-sm-10">
				      <select class="form-control" name="user.role" id="role-type">
						  <option value="1">产品/服务提供商</option>
						  <option value="2">社区服务提供商</option>
						  <option value="3">政府机构</option>
						</select>
				    </div>
				  </div>
				  <p class="text-right"> <button type="button" class="btn btn-default " id="button-1">下一步</button></p>
			  </div>
		      <!-- 第二步 -->
    		  <div  id="second-step-1" class="display-none">
    		  	  <div class="form-group">
				    <label for="" class="col-sm-3 control-label">服务商分类</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="supplierType" name="supplierType" placeholder="">
				    </div>
				  </div>
	              <div class="form-group">
				    <label for="" class="col-sm-3 control-label">服务商品牌</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="supplierBrand" name="supplierBrand" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-3 control-label">供应商名称</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="supplierName" name="supplierName" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-3 control-label">供应商地址</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="address" name="address" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-3 control-label">供应商联系人</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="supplierMan" name="supplierMan" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-3 control-label">供应商联系方式</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="supplierNum" name="supplierNum" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-3 control-label">传真</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="supplierFax" name="supplierFax" placeholder="">
				    </div>
				  </div>
				  <p class="text-right"> 
				    <button type="button" class="btn btn-default " id="last_step_1">上一步</button>
				    <button type="submit" class="btn btn-default ">提交</button>
				  </p>
    		  </div>
    		  <div  id="second-step-2" class="display-none">
				  <div class="form-group">
				    <label for="" class="col-sm-4 control-label">供应商名称</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control"id="providerName" name="providerName" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-4 control-label">供应商地址</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control" id="providerAddress" name="providerAddress" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-4 control-label">供应商联系人</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control" id="providerMan" name="providerMan" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-4 control-label">供应商联系方式</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control" id="phoneNum" name="phoneNum" placeholder="">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="" class="col-sm-4 control-label">供应商提供服务的其它地区</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control" id="otherZone" name="otherZone" placeholder="">
				    </div>
				  </div>
				  <p class="text-right">
				   <button type="button" class="btn btn-default " id="last_step_2">上一步</button>
				   <button id="button-3" type="submit" class="btn btn-default ">提交</button>
				  </p>
    		  </div>
			</form>
    	</div>
    	<div class="col-md-3"></div>
    </div> 
</div>
<script type="text/javascript">
	$("#role-type").change(function(){
		var value = $("#role-type").val();
		if(value == 3){
			$("#button-1").html("提交").attr("type","submit");
			$("#register").attr("action","<%=basePath%>/user/addUser");
			$.windowbox.change();
		}else if (value == 2) {
			$("#register").attr("action","<%=basePath%>/provider/addProvider");
			$("#button-1").html("下一步").attr("type","button");
		}else{
			$("#button-1").html("下一步").attr("type","button");
			$("#register").attr("action","<%=basePath%>/supplier/addSupplier");
			
		}
	});
	$("#button-1").click(function(){
		var value = $("#role-type").val();
		if(value == 3){
			/*  提交表单*/
		}else if(value == 1){
			$("#first-step").addClass("display-none");
			$("#second-step-1").removeClass("display-none");
		}else{
			$("#first-step").addClass("display-none");
			$("#second-step-2").removeClass("display-none");
		}
	});
	
	$.windowbox = {
			change: function(){
				$("#username").attr("name","username");
				$("#password").attr("name","password");
				$("#truename").attr("name","truename");
				$("#gender").attr("name","gender");
				$("#role-type").attr("name","role");
			}
	}
	
	$("#last_step_1").click(function(){
		$("#second-step-1").addClass("display-none");
		$("#first-step").removeClass("display-none");
	});
	$("#last_step_2").click(function(){
		$("#second-step-2").addClass("display-none");
		$("#first-step").removeClass("display-none");
		
	});
	
</script>
</body>
</html>